<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="keywords" content='easyui,jui,jquery easyui,easyui demo,easyui中文'/>
    <meta name="description" content='TopJUI前端框架，基于最新版EasyUI前端框架构建，纯HTML调用功能组件，不用写JS代码的EasyUI，专注你的后端业务开发！'/>
    <title>中超成本分析系统</title>
    <!-- 浏览器标签图片 -->
    <link rel="shortcut icon" href="general/topjui/images/favicon.ico"/>
    <link rel="stylesheet" href="general/static/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="general/static/plugins/font-awesome/css/font-awesome.min.css">
    <style type="text/css">
        html, body {
            height: 100%;
        }
        .box {
            background: url("general/static/public/imgs/bg_1.png") no-repeat center center;
            background-size: cover;

            margin: 0 auto;
            position: relative;
            width: 100%;
            height: 100%;
        }
        .login-box {
            width: 100%;
            max-width: 500px;
            height: 400px;
            position: absolute;
            top: 50%;
            margin-top: -200px;
            /*设置负值，为要定位子盒子的一半高度*/
        }
        @media screen and (min-width: 500px) {
            .login-box {
                left: 50%;
                /*设置负值，为要定位子盒子的一半宽度*/
                margin-left: -250px;
            }
        }
        .form {
            width: 100%;
            max-width: 500px;
            height: 275px;
            margin: 2px auto 0px auto;
        }
        .login-content {
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
            height: 250px;
            width: 100%;
            max-width: 500px;
            background-color: #009688;
            /*background-color: rgba(255, 250, 2550, .9);*/
            float: left;
        }
        .input-group {
            margin: 30px 0px 0px 0px !important;
        }
        .form-control,
        .input-group {
            height: 40px;
        }
        .form-actions {
            margin-top: 30px;
        }
        .form-group {
            margin-bottom: 0px !important;
        }
        .login-title {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            padding: 20px 10px;
            background-color: rgba(0, 0, 0, .6);
        }
        .login-title h1 {
            margin-top: 10px !important;
        }
        .login-title small {
            color: #fff;
        }
        .link p {
            line-height: 20px;
            margin-top: 30px;
        }
        .btn-sm {
            padding: 8px 24px !important;
            font-size: 16px !important;
        }
        .flag {
            position: absolute;
            top: 10px;
            right: 10px;
            color: #fff;
            font-weight: bold;
            font: 14px/normal "microsoft yahei", "Times New Roman", "宋体", Times, serif;
        }
    </style>
    <!--
    <title>${config_siteConfig.cfgCompanyName}</title>
    -->
</head>
<script language="JavaScript"> 
if (window!=top) 
top.location.href=location.href; 
</script> 
<body>
<div class="box">
    <div class="login-box">
        <div class="login-title text-center">
            <span class="flag"><i class="fa fa-user"></i> 用户登录</span>
            <h1>
                <small>中超成本分析系统</small>
            </h1>
        </div>
        <div class="login-content ">
            <div class="form">
                <form id="modifyPassword" class="form-horizontal" action="#" method="post">
                	<!--
                    <input type="hidden" id="referer" name="referer" value="${param.referer}">
                    -->
                    <div class="form-group">
                        <div class="col-xs-10 col-xs-offset-1">
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                <input type="text" id="username" name="username" class="form-control" placeholder="用户名">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-10 col-xs-offset-1">
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input type="password" id="password" name="password" class="form-control" placeholder="密码">
                            </div>
                        </div>
                    </div>
                    <div class="form-group form-actions">
                        <div class="col-xs-12 text-center">
                            <button type="button" id="login" class="btn btn-sm btn-success">
                                <span class="fa fa-check-circle"></span> 登录
                            </button>
                            <button type="button" id="reset" class="btn btn-sm btn-danger">
                                <span class="fa fa-close"></span> 重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <span class="text-danger"><i class="fa fa-warning"></i> 用户名或密码错误，请重试！</span>
            </div>
        </div>
    </div>
</div>

<!-- 引入jQuery -->
<script src="general/static/plugins/jquery/jquery.min.js"></script>
<script src="general/static/plugins/jquery/jquery.cookie.js"></script>
<script src="general/static/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(function () {
		$('#password').keyup(function(event) {
			if(event.keyCode=="13"){
				$("#login").trigger("click");
				return false;
			}
		});
		$("#login").on("click",function(){
			submitForm();
		});

		function submitForm(){
			//下面的代码校验空
			var u=$('#username').val().trim();
			var p=$('#password').val().trim();
			if(u=="" || p==""){
				$('#username').focus();
				$('.text-danger').empty();
				$(".text-danger").append("<i class=\"fa fa-warning\"></i> 请输入用户名与密码！");
				$('#myModal').modal();
				return;
			}
			var formData={};
			formData.username=u;
			formData.password=p;
			$('#login').attr('disabled',true); //设为只读
			debugger;
			$.ajax({
				type: 'POST',
				url: '/login/login',
				data: formData,
				dataType:"json",
				success:function(data){
					debugger;
					$('#login').attr('disabled',false); //放开只读
					if(data.status=="success"){
						debugger;//混淆代码
						var t=window.btoa(u);//编码
						var dUrl='/web/index.html?t='+t;
						console.log(dUrl);
						location.href=dUrl;
					}
					if(data.status=="error"){
						$('.text-danger').empty();
						$(".text-danger").append("<i class=\"fa fa-warning\"></i> "+data.message+"，请重试！");
						$('#myModal').modal();
					}
				},
				error:function(){
					debugger;
					$('#login').attr('disabled',false); //放开只读
					$('.text-danger').empty();
					$(".text-danger").append("<i class=\"fa fa-warning\"></i> 网络异常，请检查网络并重试！");
					$('#myModal').modal();
				}
			});
		}
		
		//用户名密码初始化
		$("#reset").on("click",function(){
			$("#username").val("");
			$("#password").val("");
		});
	});
	
	//调用取session信息接口
	function test(){
		$.ajax({
			type: 'POST',
			url: "/login/getSessionAttribute",
			dataType:"json",
			success:function(data){
		    console.log("取session信息接口的返回值==",data);
				console.log("session中的用户信息==",data.login);
				console.log("session中的权限信息==",data.rolesArray);
				debugger;
			}
		});
	}
</script>
</body>
</html>